<template>
  <div id="navigation">
    <mu-paper class="bottom">
      <mu-bottom-nav color=white ripple :value="bottomNav" @change="handleChange">
        <mu-bottom-nav-item value="home" title="首页"
                            icon="home"
                            to="home">
        </mu-bottom-nav-item>
        <mu-bottom-nav-item value="notice" title="公告"
                            icon="notifications"
                            to="noticeList">
        </mu-bottom-nav-item>
        <mu-button style="margin-right: 1.3rem;margin-left: 1.3rem" fab small ripple color="primary"
                   @click="openScrollDialog">
          <mu-icon value="add"></mu-icon>
        </mu-button>
        <mu-bottom-nav-item value="caseList" title="案件"
                            icon="chrome_reader_mode"
                            to="caseList">
        </mu-bottom-nav-item>
        <mu-bottom-nav-item value="info" title="我的"
                            icon="account_circle">
        </mu-bottom-nav-item>
      </mu-bottom-nav>
    </mu-paper>
    <mu-bottom-sheet :open.sync="open">
      <mu-list @item-click="closeBottomSheet">
        <mu-sub-header>系统检测到您未登录，请选择</mu-sub-header>
        <mu-list-item button @click="goLogin">
          <mu-list-item-action>
            <mu-icon value="account_circle" color="orange"></mu-icon>
          </mu-list-item-action>
          <mu-list-item-title>手机号登陆</mu-list-item-title>
        </mu-list-item>
        <mu-list-item button @click="goRegister">
          <mu-list-item-action>
            <mu-icon value="inbox" color="blue"></mu-icon>
          </mu-list-item-action>
          <mu-list-item-title>手机号注册</mu-list-item-title>
        </mu-list-item>
      </mu-list>
    </mu-bottom-sheet>
    <mu-bottom-sheet style="max-height: 320px;overflow: scroll" :open.sync="openScroll">
      <mu-list dense @item-click="closeBottomSheet2">
        <mu-sub-header><h3>请先选择案件，再进入申报</h3></mu-sub-header>
        <mu-row style="padding: 0 1rem 0 1rem;margin: -1.5rem 0 0 0">
          <mu-list>
            <mu-list-item>
              <mu-list-item-content>
                <mu-text-field placeholder="请搜索" solo full-width @change="refresh"
                               v-model="title"></mu-text-field>
              </mu-list-item-content>
              <mu-list-item-action>
                <mu-button icon slot="right" @click="refresh">
                  <mu-icon value="search"></mu-icon>
                </mu-button>
              </mu-list-item-action>
            </mu-list-item>
          </mu-list>
          <mu-divider></mu-divider>
        </mu-row>
        <mu-row style="margin: 0.5rem 1rem 1rem 2rem">
          <span style="font-size: 10px;color: #9e9e9e">若不存在，请联系我们，联系电话：0571--89180115;或在<a href="#" @click="goFeedback"
                                                                                           class="more">意见反馈</a>里向我们提供建议</span>
        </mu-row>
        <mu-list-item :key="option.id" v-for="option in caseList" button
                      @click="openAlertDialog(option.id,option.title)">
          <!--&lt;!&ndash;<mu-list-item-action>&ndash;&gt;-->
          <mu-icon value="inbox" style="margin-right: 0.5rem" color="blue"></mu-icon>
          <!--</mu-list-item-action>-->
          <mu-list-item-title>{{option.title}}</mu-list-item-title>
        </mu-list-item>
      </mu-list>
    </mu-bottom-sheet>
    <mu-dialog :title="protocol.title" width="600" max-width="90%" :esc-press-close="false" :overlay-close="false"
               :open.sync="openAlert">
      <span v-html="protocol.content"></span>
      <mu-button slot="actions" flat color="primary" @click="closeAlertDialog">关闭</mu-button>
      <mu-button slot="actions" flat color="primary" @click="sureAlertDialog">同意</mu-button>
    </mu-dialog>
  </div>
</template>

<script>
  export default {
    name: 'navigation',
    data() {
      return {
        caseId: '',
        caseTitle: '',
        protocol: {
          id: '',
          title: '申报说明',
          content: this.PROTOCOL_CONTENT
        },
        openAlert: false,
        title: '',
        refreshing: false,
        loading: false,
        search: '',
        num: 10,
        caseList: [],
        openScroll: false,
        open: false,
        bottomNav: '',
        redirect: '/caseList'
      }
    },
    methods: {
      getProtocol(id) {
        const _self = this;
        let params = {
          id: id
        };
        this.postRequest("/protocol/getProtocol", params).then(res => {
          if (res.code === 200 && res.data) {
            _self.protocol = res.data;
          }
        });
      },
      openAlertDialog(id, title) {
        this.caseId = id;
        this.caseTitle = title;
        this.goDeclare();
      },
      sureAlertDialog() {
        this.openAlert = false;
        this.goDeclare();
      },
      closeAlertDialog() {
        this.openAlert = false;
      },
      refresh() {
        this.refreshing = true;
        setTimeout(() => {
          this.refreshing = false;
          this.num = 10;
          this.getCaseList();
        }, 100)
      },
      load() {
        this.loading = true;
        setTimeout(() => {
          this.num += 10;
          this.getCaseList();
          this.loading = false;
        }, 1000)
      },
      getCaseList() {
        const _self = this;
        let listPO = {
          size: this.num,
          current: 1,
          params: [{
            field: "fh_case.title",
            operator: "like",
            value: this.title
          }]
        };
        this.postRequest("/case/list", listPO).then(res => {
          if (res.code === 200) {
            if (res.data) {
              _self.caseList = res.data.records;
            }
          }
        });
      },
      openScrollDialog() {
        let token = this.getStore("accessToken");
        if (!token) {
          this.open = true;
        } else {
          this.openScroll = true;
          this.getCaseList();
        }
      },
      handleChange(val) {
        this.redirect = val;
        if (val === 'add' || val === 'info') {
          let token = this.getStore("accessToken");
          if (!token) {
            this.open = true;
          } else {
            this.bottomNav = val;
            if (val === 'add') {
              this.openScrollDialog();
            } else if (val === 'info') {
              this.goInfo();
            }
          }
        } else {
          this.bottomNav = val
        }
      },
      goDeclare() {
        this.openScroll = false;
        this.$router.push({name: 'declare', query: {caseId: this.caseId, title: this.caseTitle}});
      },
      goInfo() {
        this.$router.push({name: "info"});
      },
      goRegister() {
        this.$router.push({name: 'register', query: {redirect: this.redirect}})
      },
      goLogin() {
        this.$router.push({name: 'login', query: {redirect: this.redirect}})
      },
      closeBottomSheet() {
        this.open = false;
      },
      closeBottomSheet2() {
        this.openScroll = false;
      },
      goFeedback() {
        this.openScroll = false;
        this.$router.push({name: 'feedback'})
      }
    },
    mounted() {

    }
  }

</script>

<style lang="scss">
  .bottom {
    position: fixed;
    bottom: 0;
    width: 100%;
  }

  .mu-bottom-nav {
    background-color: #ffffff;
  }

  .mu-bottom-nav-shift {
    background-color: #ffffff;
  }

  .mu-bottom-item {
    color: #929292;
    min-width: 0;
  }

  .mu-bottom-nav-shift .mu-bottom-item {
    color: #bdbdbd;
  }

  .mu-bottom-item-active .mu-bottom-item-icon,
  .mu-bottom-item-active .mu-bottom-item-text {
    color: #3f51b5;
  }

  .mu-bottom-nav-shift .mu-bottom-item-active .mu-bottom-item-icon,
  .mu-bottom-nav-shift .mu-bottom-item-active .mu-bottom-item-text {
    color: #3f51b5;
  }
</style>
